<template>
    <div class="login-container">
        <el-form :model="ruleForm2" :rules="rule2" status-icon ref="ruleForm2" label-position="left" label-witdh="0px"
                 class="login-page ruleForm">
            <h3 class="title">
                系统登陆
            </h3>
            <el-form-item prop="name">
                <el-input type="text" v-model="ruleForm2.name" auto-complete="off" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="rememberme" class="rememberme">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item style="width: 100%;">
                <el-button type="primary" style="width: 100%;" @click="handlerSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        logining: false,
        ruleForm2: {
          name: null,
          password: null
        },
        rule2: {
          name: [{required: true, message: '请输入用户名称', trigger: 'blur'}],
          password: [{required: true, message: '请输入用户密码', trigger: 'blur'}]
        },
        checked: false
      }
    },
    methods: {
      handlerSubmit() {
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.logining = true
            console.log(this.ruleForm2)
            this.$http.post('/login', this.$qs.stringify(this.ruleForm2))
              .then(response => {
                console.log(response)
                if (response.data.state === 1) {
                  this.$message.success({
                    message:'登陆成功',
                    offset: 100
                  })
                  this.logining = false;
                  sessionStorage.setItem('user', this.ruleForm2.name);
                  this.$router.push({path:'/'})
                  return true
                }else{
                  this.$message.error({
                    message:response.data.msg,
                    offset: 100
                  })
                  this.logining = false;
                  return false
                }
              })
              .catch(err => {
                console.log(err)
                this.logining = false;
              })
            // if (this.ruleForm2.rememberme === 'admin' && this.ruleForm2.password === '123456'){
            //   this.logining = false;
            //   sessionStorage.setItem('user', this.ruleForm2.rememberme);
            //   this.$router.push({path: '/'});
            // }else{
            //   this.logining = false;
            //   this.$alert('用户名或密码错误', '', {
            //     confirmButtonText: 'ok'
            //   })
            // }
          } else {
            console.log("error", this.ruleForm2)
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
    .login-container {
        width: 100%;
        height: 100%;
    }

    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .rememberme {
        margin: 0 0 15px;
        text-align: left;
    }
</style>